@import 'share';
@import 'styleset';

/* === Remove input autofocus webkit === */
*:focus {outline: none;}

/* === Form Typography === */
.paneoform {
    margin: 0 auto !important;
    width:90%;
    font-size:1.3em;
    padding:2% 2% !important;
}

@mixin placeholder-color($color) {
     &:-moz-placeholder {
         color:$color;
     }
     &::-webkit-input-placeholder {
         color:$color;
     }
 }

input {
    @include placeholder-color(#aaa);
}
textarea {
    @include placeholder-color(#ccc);
}

.paneoform .required_notification {font-size: 1em;color:red;}

.paneoform input:required, .paneoform textarea:required {
    background: #fff url(/common/img/red_asterisk.png) no-repeat 98% center;
    background-size: 140px 18px;
}
.paneoform input:required:valid, .paneoform textarea:required:valid {
    background: #fff url(/common/img/valid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}
.paneoform input:focus:invalid, .paneoform textarea:focus:invalid {
    background: #fff url(/common/img/invalid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

.paneoform label {
    display:block;  
    font-size:1.5em;
    background-color:#ccc;
    padding:.2em .3em  
}  

//.selector11b{  
//    border-left:#ccc solid 6px;  
//    padding:.3em .3em .3em .8em  
//}  


div.formalert {
    border:2px solid red;
    margin:1%;
    padding:1%;
    text-align:center;
    color:#ffffff;
    background-color:#FF6666;
}

.alert {
    border:2px solid red;
    background-color:#FFB7B8;
}

.paneoform input[type="text"],
.paneoform input[type="email"],
.paneoform textarea {
    width:100%;
    height: 2em;
    padding: 0 5px;
    font-size: 20px;
}
.paneoform select {
    width:100%;
    height: 2em;
    padding:5px 5px 0 5px;
    font-size: 20px;
}

div.paneoform textarea#kikkake {
    width:100%;
    min-height:200px;
}

.submit {
  background: #8fd324;
  background: -moz-linear-gradient(top, #b1e362 0%, #a2d847 50%, #8acb1f 50%, #7dbf0d 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #b1e362), color-stop(0.5, #a2d847), color-stop(0.5, #8acb1f), color-stop(1, #7dbf0d));
  border: 1px solid #5b9400;
  border-bottom: 1px solid #568a03;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: inset 0 1px 0 0 #c8eb8f;
  -webkit-box-shadow: inset 0 1px 0 0 #c8eb8f;
  box-shadow: inset 0 1px 0 0 #c8eb8f;
  color: #fff;
  font-size:2em;
  padding: 7px 0 8px 0;
  text-decoration: none;
  text-align: center;
  text-shadow: 0 -1px 1px #426b01;
  width: 65%;
  margin-right:5%;
}

.submit:hover {
  background: #689b13;
  background: -moz-linear-gradient(top, #9ad055 0%, #8dc241 50%, #78b41b 50%, #6da70a 100%);
  background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #9ad055), color-stop(0.5, #8dc241), color-stop(0.5, #78b41b), color-stop(1, #6da70a));
  cursor: pointer;
}

.submit:active {
  -moz-box-shadow: inset 0 0 10px 0 #2b430d, 0 1px 0 #fff;
  -webkit-box-shadow: inset 0 0 10px 0 #2b430d, 0 1px 0 #fff;
  box-shadow: inset 0 0 10px 0 #2b430d, 0 1px 0 #fff;
  cursor: pointer;
}

.cancel {
  border:1px solid #e0e0e0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-size:2em;
  padding: 7px 0 8px 0;
  text-decoration: none;
  text-align: center;
  width: 25%;
}

.cancel:hover {
  cursor: pointer;
}

.cancel:active {
  cursor: pointer;
}




@media only screen and (max-width:480px)
{
.paneoform {
    width:100%;
    font-size:1em !important;
}
}

@media only screen and (max-width:480px)
{
.paneoform label {
    width:100%;
    margin-bottom:5px;
}
.paneoform input,.paneoform textarea {
    width:80%;
    margin-bottom:10px;
    font-size:1em;
}
}

@media only screen and (max-width:480px)
{
.form_hint {
    margin:0;
    margin-bottom:5px;
}
}
    
div#maruwakari,
section#catalog{
	padding: 0 2em;
	font-family: $gothicfont;
}

section#catalog{
	background-color: $other_color3;
	padding: 2% ;
}

section#catalog h2 {
    font-size: 1.786em;
    font-weight: normal;
    margin: 0;
}

section#catalog p.catch {
    margin: 1em 0;
}

section#catalog li.title h4,
section#catalog li.item h4 {
    font-size: 1em;
    font-weight: normal;
    margin: 0.5em;
}

section#catalog li.title div figure {
    margin: 0 0 0 1.2em;
    width: 60%;
}

section#catalog li h3 {
    margin: 0.5em 0;
    font-size: 1em
}

section#catalog li figure,
section#catalog li.title p {
    margin: 0.3em;
    text-align: center;
}

section#catalog li.cat {
    background-color: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 5px 9px rgba(0, 0, 0, 0.16);
    margin-bottom: 0.5em;
    overflow: hidden;
    padding: 0;
}

div#maruwakari div#header{
	padding: 2em 0 0 0;
	margin: 0 2em;
	overflow: hidden;
	
}

div#maruwakari div#header h2 img,
div#maruwakari div#header h3 img{
	margin: 0 0.5em 0 0;
}

div#maruwakari div#header h2,
div#maruwakari div#header h3{
	font-family: $gothicfont;
	font-weight: normal;
}

div#maruwakari div#header h3 {
	font-size: 1.076em;
	line-height: 1.3em;
}

div#maruwakari div#header h3 b{
	font-size: 1.71429em;	
}

div#maruwakari div#header h4{
	text-align: right;
	margin: 1em 0;
}

div#maruwakari h3.formbutton{
	border-bottom: 5px solid $main_color4;
	padding-bottom: 1em;
	margin: 1em 0;
}

div#maruwakari h3.formbutton img{
	vertical-align: bottom;
}

div#maruwakari h3.formbutton b{
	margin: 0 1em;
}

div#maruwakari h3.campaign{
	font-size: 1.786em;
	font-weight: normal;
	border: 1px solid $main_color5;
	padding: 1em;
	
}


h2.ask,
h2.kitt {
	background: $main_color4;
	margin:0 0 30px 0;
	padding:12px 10px;
	color:#FFF;
/*	text-shadow:1px 1px 2px #333;*/
	position:relative;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border-left:1px solid #ccc;
	border-top:1px solid #ccc;
	box-shadow: 1px 1px 4px #ccc;
	}
 
h2.ask:before,
h2.kitt:before {
	border-color:$main_color4 transparent transparent;
	border-style:solid;
	border-width:16px 16px 0;
	bottom:-16px;
	content:"";
	display:block;
	left:32px;
	position:absolute;
	width:0;
	}



div.atten{
	margin: 2em;
}

div.atten p{
	margin: 0 2em;
}

div.atten h4{
	font-size: 1.071em;
	font-weight: normal;
	background-color: $main_color4;
	padding: 1% 2%;
	margin: 1em 0;
	color: #fff;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

span.required_notification{
	margin: 0 0 1em 0;
	display: block;
	font-size: 1.786em;
}

form li{
margin: 0 0.5em 0.5em 0;
}

div.banner{
font-size: 1.071em;
	font-weight: normal;
	background-color: $main_color4;
	padding: 1% 2%;
	margin: 1em 0;
	color: $main_color2;
}

div.banner img{
	width: 15%;
	vertical-align: bottom;
	margin: 0 0.5em 0 0;
}

div.banner a{
font-size: 1.2em;
	font-weight: normal;
	color: $main_color2;
}

div.banner b{
	font-size: 0.8em;
	color: #fff;
	margin: 0 0 0 1em;
}

div.banner b span{
	color: $other_color5;
}


/*関連カタログ*/
section#etc_catalog 
{
	margin: 2em 0;
	overflow: hidden;
}

section#etc_catalog h3.title{
	font-size: 1.071em;
	font-weight: normal;
	margin: 0 1em;
}

section#etc_catalog h4{
    font-size: 0.8em;
    font-weight: normal;
	margin: 0 1em;
}

section#etc_catalog div.row{
	margin: 0 2em 1em 2em;
	border-bottom: 5px dotted #ccc;
	padding-bottom: 0.3em;
}

section#etc_catalog div.row div.row,
section#etc_catalog div.row:last-child{
	border: none;
}

section#etc_catalog h2{
	font-family: $gothicfont;
	font-size: 1.5em;
	font-weight: normal;
}

section#etc_catalog h2 b{
	margin: 0 0.2em 0 0;
-webkit-box-shadow: -4px 3px 5px rgba(50, 50, 53, 0.40);
-moz-box-shadow:    -4px 3px 5px rgba(50, 50, 53, 0.40);
box-shadow:         -4px 3px 5px rgba(50, 50, 53, 0.40);}

section#etc_catalog div.row p{
	font-size: 0.8em;
	font-family: $gothicfont;
	color: $main_color4;
	margin: 0.3em 0 0 0;
}

section#etc_catalog h2.loan{
	margin: 2em 0 0.5em 1.2em;
}

section#etc_catalog h2.loan b{
	background-color: $main_color6;
	padding: 0 0.5em;
}

section#etc_catalog h2.hoken b{
	background-color: $main_color4;
	padding: 0 0.5em;
}

section#etc_catalog h2.sec b{
	background-color: $main_color3;
	padding: 0 0.5em;
}

section#etc_catalog h2.hikkoshi b{
	background-color: $other_color2;
	padding: 0 0.5em;
}

section#etc_catalog h2.kagu b{
	background-color: $other_color6;
	padding: 0 0.5em;
}

section#etc_catalog h2.solar b{
	background-color: $other_color5;
	padding: 0 0.5em;
}

/*関連カタログ*/



/*プレゼント*/
section#present {
    background-color: #F7F8D4;
    border-radius: 5px 5px 5px 5px;
    margin: 0;
    overflow: hidden;
    padding: 1% 2%;
}


section#present ul li{
	margin: 0 0.5em 0 0;
	width: 10%;
}

section#present ul li h4 {
    color: #8FC10C;
    font-size: 0.8em;
    font-weight: normal;
    height: 40px;
    margin: 1em 0;
}

section#present li figure{
	margin: 0;
	padding: 0;
}

.document{
	margin: 0;
	padding: 0;
}

/*イベントフォーム*/

/*ヘッダー*/

div#eventhead {
@include backcolor(0,'img',#000000);
@include clearfix;
background-color:#ffffff;
}
div#eventhead div.backcolor {
	filter: alpha(opacity=80);
	-moz-opacity:0.80;
	opacity:0.80;}
	
div#eventhead div.backcolor div.color {
max-height:200px;
}

div#eventhead div.backcolor div.cover img {
    position:absolute;
    right:250px;
    top:40px;
}

div#eventhead div.header h1{
	font-size: 1.786em;
	font-weight: normal;
	color: #fff;
	display: block;
}

div#eventhead div.header h1 img {
    vertical-align: text-bottom;
    margin: 0 1% 0 0;
}

div#eventhead div.header_box {
    height:200px;
}
div#eventhead div.header {
    position:relative;
    top:70px;
    left: 20px;
    z-index:100;
} 

/*ヘッダー*/
